<!--
* @name: 人员设置
* @author:zhangpengcheng
-->

<template>
  <div>
    <!-- 人员弹窗 -->
    <base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="addDialog"
                 @handleClose="handleClose" class="userDialog" title="新增人员" width="700px" top="10vh"
    >
      <base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" @elDialogClick="organClick"
                 :rules="userRules" @onSubmit="getSubmit"
      >
      </base-form>
    </base-dialog>
    <div flex style="height: 100%;">
      <base-layout title="组织机构" style="width:260px;" :defaultButtonSwitch="false" :isPage="false"
                   :mainColor="mainColor" :operateButtonSwitch="false" v-loading="treeLoading"
      >
        <div slot="main" style="height: 100%;border-right: 1px solid #dfe6ec;overflow-y: auto;">
          <base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
                     :menuData="menuData" @handleNodeClick="treeClick"
          ></base-tree>
        </div>
      </base-layout>
      <base-layout title="人员信息" ref="personLayout" @pageChange="pageChange" :buttonList="buttonList"
                   @onFuncBtn="getFuncBtn" :isPage="true" style="flex:1;"
      >
        <div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
          <base-table ref="personCustomtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
                      @radioChange="radioChange" :tableHeight="tableHeight" :tableData="tableData"
                      :tableColumn="tableColumn" :slotrow="true"
          >
            <!--  入职时间  -->
            <template v-slot:p_EntryTime="{ row }">
              <span>{{ row.row.p_EntryTime | timeDate }}</span>
            </template>
            <!--  生日  -->
            <template v-slot:p_BirthDay="{ row }">
              <span>{{ row.row.p_BirthDay | timeDate }}</span>
            </template>
          </base-table>
        </div>
      </base-layout>
    </div>

    <!-- 部门+对外签订弹窗 -->
    <base-organization ref="baseOrganization" :menuData="menuData"
                       @handleConfirmClick="organizationHandleConfirm"
    ></base-organization>
    <!-- 		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false"
      @handleConfirmClick="organizationHandleConfirm" :dialogVisible.sync="organizationDialog" class="userDialog"
      title="选择组织机构" width="700px" top="10vh" :footerShow="true">
      <div class="organizationBody">
        <base-layout title="组织机构" style="width: 45%;border-radius: 5px;height: 350px;overflow: auto;"
          :bottonShow="false" :isPage="false" :mainColor="mainColor" :mainHight='orangHight'>
          <div slot="main">
            <base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false"
              :showCheckbox="false" :menuData="menuData" @handleNodeClick="orangNodeClick">
            </base-tree>
          </div>
        </base-layout>
        <base-layout title="选中机构" style="width: 45%;border-radius: 5px;height: 350px;" :bottonShow="false"
          :isPage="false" :bodyHight="treeHight">
          <div slot="main" style="padding: 10px;">
            <div flex="cross:center" style="margin-bottom: 10px;">
              <label style="width: 35%;">机构编码</label>
              <el-input style="flex:1" v-model="organizationForm.code"></el-input>
            </div>
            <div flex="cross:center">
              <label style="width: 35%;">机构名称</label>
              <el-input style="flex:1" v-model="organizationForm.ParentOrganName"></el-input></div></div></base-layout></div></base-dialog> -->
  </div>
</template>

<script>
import baseLayout from '@/components/base/baseLayout'
import baseTable from '@/components/base/baseTable'
// import baseDialog from "@/components/base/BaseNewDialog";
import baseDialog from '@/components/base/BaseNewDialog/index.vue'
import baseForm from '@/components/base/baseNewForm/index.vue'
import baseTree from '@/components/base/BaseMenuTree/index.vue'
import baseOrganization from '@/components/base/baseOrganization/index.vue'
import { getCompanyId } from '@/utils/auth'
import {
  PersonList,
  PersonDetail,
  PersonSaveData,
  PersonDelData,
  PersonOpen,
  PersonClose
} from '@/api/apis/personnelSettings'
import {
  GetOrganTree
} from '@/api/apis/organization'
import {
  dataDictionaryGetBillList
} from '@/api/apis/dataDictionary'
import configData from './configData'
import { authApi } from '@/api/apis/auth'

export default {
  name: 'review',
  components: {
    baseLayout,
    baseTable,
    baseDialog,
    baseForm,
    baseTree,
    baseOrganization
  },
  data() {
    return {
      treeLoading: false,
      radioIndex: false,
      radioId: false,
      treeHight: '350px',
      orangHight: 'calc(100% - 39px)',
      mainColor: '#f8f8f8 ',
      organizationDialog: false, //选择组织机构弹窗
      menuData: [],
      buttonList: [
        {
          icon: 'button_reset',
          menuName: '启用'
        },
        {
          icon: 'button_reset',
          menuName: '停用',
          type: 'danger'
        }
      ],
      tabLoading: false,
      tableData: [],
      // 搜索配置
      searchModel: configData.searchModelJson,
      // 列表参数
      param: {},
      addDialog: false,
      ruleForm: {
        roleName: null, // 角色名称
        roleNumber: null, // 角色编码
        order: null, // 排序
        describe: null // 描述
      },
      roleOptions: configData.roleOptions,
      formRow: configData.formRow,
      userRules: configData.userRules,
      isFunBtn: true,
      pageModel: {
        pageNum: 1,
        pageSize: 999,
        organId: '',
        Sequence: '',
        SequenceName: ''
      },
      P_PersonID: 0,
      organizationForm: {}
    }
  },
  computed: {
    // 表头配置
    tableColumn() {
      return configData.tableColumnJson
    }
  },
  watch: {

    addDialog: {
      deep: true,
      handler(newValue, oldValue) {
        if (newValue == false) {
          this.$refs.customForm.choiceAssignment({})
        } else {
          this.getLevelnList()
          this.getEducationList()
          this.getPostList()
        }
      }
    }
  },
  created() {
  },
  onShow() {
  },
  mounted() {
    this.initPage()

  },
  filters: {
    timeDate(row) {
      if (!row) {
        return
      }
      return row.split('T')[0]
    }
  },
  methods: {
    // 点击单元格进行多选操作
    radioChange(val) {
      this.radioIndex = val.index
      this.radioId = val.id
    },
    // 树状图点击
    treeClick(data) {
      this.pageModel.organId = data.id
      this.radioIndex = false
      this.radioId = false
      this.resetTable()
    },
    // 初始化页面
    initPage() {
      // this.getTableList()
      this.getTreeList()

    },
    // 获得树状图
    async getTreeList() {
      this.treeLoading = true
      setTimeout(() => {
        this.treeLoading = false
      }, 180000)
      let params = {
        state: 0
        // CompanyID: this.$store.state.user.companyID?this.$store.state.user.companyID:getCompanyId()
      }
      let res = await authApi('sysOrganService', '', 'queryEntityTree', '', {})
      if (res.status == 200) {
        this.menuData = res.attribute
        this.treeLoading = false
      }
    },
    // 删除功能
    async tableDelData(id) {
      let params = {
        id: id
      }
      let res = await authApi('sysPersonService', '', 'deleteEntity', '', params)
      if (res.status == 200) {
        this.$vmNews('删除成功', 'success')
        this.resetTable()
        // this.pageModel.page = 1
        // this.$refs.personLayout.setPageNum(1)
      }
    },

    // 获得详情
    async getDetail(id) {
      let params = {
        id: id
      }
      let res = await authApi('sysPersonService', '', 'getEntity', '', params)
      console.log(res, 'res')
      // res.data[0].o_OrganName = res.data[0].orgainName
      this.addDialog = true
      this.$nextTick(() => {
        this.$refs.customForm.choiceAssignment(res.attribute)
      })
    },
    // 获取学历类型
    async getEducationList() {
      let params = {
        'usedSts': '1',//1 使用，2 不使用
        tabName: 'sys_person',
        columnName: 'degree_id'
      }
      let res = await authApi('sysDictionaryshopService', '', 'queryEntity', '', params)
      if (res.status == 200) {
        console.log(res.attribute,'res')
        let arrList = []
        if (res.attribute.length) {
          res.attribute.forEach(el => {
            let arr = {
              label: el.columnContent,
              value: el.id
            }
            arrList.push(arr)
          })
        }
        console.log(arrList,'arrList')
        configData.formRow[2].elCol[1].options = arrList
      }
    },
    // 获取职务类型
    async getPostList() {
      let params = {
        'usedSts': '1',//1 使用，2 不使用
        tabName: 'sys_person',
        columnName: 'post_id'
      }
      let res = await authApi('sysDictionaryshopService', '', 'queryEntity', '', params)
      if (res.status == 200) {
        let arrList = []
        if (res.attribute.length) {
          res.attribute.forEach(el => {
            let arr = {
              label: el.columnContent,
              value: el.id
            }
            arrList.push(arr)
          })
        }
        console.log(arrList,'arrList222')
        configData.formRow[3].elCol[0].options = arrList
      }
    },
    // 获取级别类型
    async getLevelnList() {
      let params = {
        'usedSts': '1',//1 使用，2 不使用
        tabName: 'sys_person',
        columnName: 'level_id'
      }
      let res = await authApi('sysDictionaryshopService', '', 'queryEntity', '', params)
      if (res.status == 200) {
        let arrList = []
        if (res.attribute.length) {
          res.attribute.forEach(el => {
            let arr = {
              label: el.columnContent,
              value: el.id
            }
            arrList.push(arr)
          })
        }
        console.log(arrList,'arrList222')
        configData.formRow[3].elCol[1].options = arrList
      }
    },
    // 获得列表
    async getTableList() {
      this.tabLoading = true
      this.tableData = []
      this.$refs.personCustomtable.clearRadioIndex()
      let params = {
        ...this.pageModel
      }
      let res = await authApi('sysPersonService', '', 'queryEntityPage', '', params)
      if (res.status == 200) {
        console.log(res.attribute, 'res.attribute', res)
        this.tableData = res.attribute.list
        this.$refs.personCustomtable.clearRadioIndex()

        this.$refs.personLayout.setPageTotal(res.attribute.total)

      }
      this.tabLoading = false
    },
    // 停用
    async closeDelData(id) {
      let params = {
        id: id,
        'state': '1'
      }
      let res = await authApi('sysPersonService', '', 'enableDisableEntity', '', params)
      if (res.status == 200) {
        this.$vmNews('已停用', 'success')
        this.resetTable()
      }
    },
    // 启用
    async openDelData(id) {
      let params = {
        id: id,
        'state': '0'
      }
      let res = await authApi('sysPersonService', '', 'enableDisableEntity', '', params)
      if (res.status == 200) {
        this.$vmNews('已启用', 'success')
        this.resetTable()
      }
    },
    // 操作按钮事件
    getFuncBtn(btnEven) {
      if (btnEven.menuName === '新增') { // 新增
        this.addDialog = true
        this.P_PersonID = 0
        // this.$nextTick(()=>{
        // 	this.$refs.customForm.resetForm('ruleForm')
        // })
      } else {
        if (!this.judgeCheckbox()) {
          return
        }
      }
      if (btnEven.menuName === '编辑') { // 编辑
        // if (!this.judgeCheckbox()) {
        // 	return
        // }
        this.P_PersonID = this.radioId
        this.getDetail(this.radioId)
      }
      if (btnEven.menuName === '删除') { // 删除
        // if (!this.judgeCheckbox()) {
        // 	return
        // }
        this.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableDelData(this.radioId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
      if (btnEven.menuName === '停用') { // 停用
        // if (!this.judgeCheckbox()) {
        // 	return
        // }
        this.$confirm('确认停用吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.closeDelData(this.radioId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
      if (btnEven.menuName === '启用') { // 停用

        // if (!this.judgeCheckbox()) {
        // 	return
        // }
        this.$confirm('确认启用吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.openDelData(this.radioId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    judgeCheckbox() {
      if (this.radioIndex === false) {
        this.$vmNews('请勾选需要处理的信息！')
        return false
      }
      return true
    },

    // 查询、筛选事件
    pageChange(model) {
      this.pageModel.pageSize = model.limit
      this.pageModel.pageNum = model.page
      this.getTableList()
    },

    async getSubmit(data) {
      let params = {
        ...data
      }
      let res
      console.log(params, 'params')
      if (params.id) {
        res = await authApi('sysPersonService', '', 'updateEntity', '', params)
      } else {
        res = await authApi('sysPersonService', '', 'saveEntity', '', params)

      }
      if (res.status == 200) {
        this.$vmNews('保存成功', 'success')
        this.addDialog = false
        this.resetTable()
      }
    },
    resetTable() {
      this.pageModel.pageNum = 1
      this.radioIndex = false
      this.radioId = false
      this.$nextTick(() => {
        this.$refs.personCustomtable.clearSelect()
        this.$refs.personLayout.pageClear()
      })
      this.getTableList()
    },

    handleClose() {
      this.$nextTick(() => {
        this.$refs.customForm.resetForm('ruleForm')
      })
    },
    organClick(row) {
      // this.organizationDialog = true
      this.$refs.baseOrganization.dialogVisible = true
    },
    organizationHandleConfirm() {
      // this.$refs.customForm.getField(this.propLabel, this.propvalue)
      let organizationForm = this.$refs.baseOrganization.organizationForm
      this.$nextTick(() => {
        this.$refs.customForm.getField('organId', organizationForm.id)
        this.$refs.customForm.getField('organName', organizationForm.label)
      })
      // this.organizationDialog = false
      this.$refs.baseOrganization.dialogVisible = false
    },
    orangNodeClick(data) {
      this.organizationForm = {
        code: data.code,
        O_OrganID: data.id,
        ParentOrganName: data.label
      }
    }
  }
}
</script>
<style scoped lang="scss">
/* .userDialog {
		margin-top: 10vh;
		width: 700px;
		height: 80vh;
		overflow: hidden;
		overflow-y: scroll;
		scroll-widhth: 0;
	} */

.el-form-item {
  color: red !important
}

.organizationBody {
  display: flex;
  justify-content: space-evenly;
  background-color: #f2f3f4;
  padding: 10px
}
</style>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
